<template>
  <el-form-item :prop="formProp" :rules="rules" v-if="isShow">
    <template v-slot:label>
      <div
        v-if="config.showLabel || showLabel"
        class="label"
        :style="{
          justifyContent: positionLabel === 'left' ? 'flex-start' : 'flex-end',
        }"
      >
        <div class="required" v-if="config.required">*</div>
        <div>{{ config.name }}：</div>
      </div>
    </template>

    <component
      :is="config.type"
      @change="change"
      @input="change"
      :isReadonly="isReadonly"
      :formData.sync="formData"
      :config="config"
    ></component>
  </el-form-item>
</template>
<script>
import ZInput from "../Item/z-input";
import ZUpload from "../Item/z-upload";
import ZEditor from "../Item/z-editor";
import ZNumber from "../Item/z-number";
import ZDatePicker from "../Item/z-datePicker";
import ZImageUpLoad from "../Item/z-imageUpLoad";
import ZSelect from "../Item/z-select";
import ZTextarea from "../Item/z-textarea";
import ZDaterange from "../Item/z-date-range";
import ZRadio from "../Item/z-radio";
import ZTreeSelect from "../Item/z-treeSelect";
import ZTimePicker from "../Item/z-time-picker";
import ZSwitch from "../Item/z-switch";
import ZCascader from "../Item/z-cascader";
import { Mixin } from "./mixin/validate.js";
export default {
  mixins: [Mixin],
  props: {
    // 是否使用col布局（类似于element Layout布局）
    colLayout: Boolean,

    //标题显示位置
    positionLabel: String,

    //需要隐藏的字段 [String]
    formHideField: Array,

    //是否隐藏标题
    showLabel: Boolean,

    // 当前字段是否只读
    isReadonly: {
      type: Boolean,
      default: false,
    },

    // 表单内容
    formData: {
      type: Object,
      default: () => Object.create(null),
    },

    // 字段配置项
    config: {
      type: Object,
      default: () => Object.create(null),
    },
  },
  data() {
    return {
      isShow: true,
      rules: [],
    };
  },
  computed: {
    /**
     * 判断时间区间选择器是 YYYY-MM-DD || YYYY-MM-DD HH:MM:SS
     */
    formProp() {
      if (!this.config.prop && this.config.type === "ZDaterange") {
        return this.config.endTime;
      } else if (this.config.prop.constructor === String) {
        return this.config.prop;
      } else if (
        this.config.prop.constructor === Object &&
        this.config.prop.value
      ) {
        return this.config.prop.value;
      }
    },
  },
  watch: {},
  components: {
    // 输入框
    ZInput,
    // 富文本
    ZEditor,
    // 数字输入框
    ZNumber,
    // 日期选择器
    ZDatePicker,
    // 图片上传
    ZImageUpLoad,
    // 选择框
    ZSelect,
    // 文本域
    ZTextarea,
    // 时间区间选框
    ZDaterange,
    // 树形选择框
    ZTreeSelect,
    // 单选
    ZRadio,
    // 文件上传
    ZUpload,
    // 时间选择器
    ZTimePicker,
    // 开关选择器
    ZSwitch,
    ZCascader,
  },
  created() {
    this.isShowItem();
  },
  methods: {
    /**
     * 判断是否显示当前字段
     */
    isShowItem() {
      if (
        this.formHideField &&
        this.formHideField.indexOf(this.config.prop) != -1
      )
        this.isShow = false;
    },
    change() {
      this.$emit("formDataChange", this.config.prop);
    },
  },
};
</script>
<style lang="scss" scoped>
.label {
  display: flex;
  justify-content: flex-end;
}

.required {
  color: red;
  margin-right: 5px;
}
</style>
